<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/themes/default/easyui.css}">
    <link rel="stylesheet" th:href="@{/themes/icon.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="easyui-layout">

<div data-options="region:'north',height:100,split:true"></div>
<div data-options="region:'south',height:100,split:true"></div>
<div data-options="region:'west',width:200,split:true">
    <ul id="tree"></ul>
</div>
<div data-options="region:'center',split:true">
    <div id="tab" class="easyui-tabs" data-options="height:580">
        <div title="首页">
            <h1>欢迎使用***系统</h1>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.easyui.min.js}"></script>
<script th:src="@{/js/easyui-lang-zh_CN.js}"></script>
<script>
    $("#tree").tree({
       url:'auth/loadTree',
       lines:true,
        onClick:function (node) {
            if (node.attributes.authPath){
                openTab(node);
            }
        }
    });
    function openTab(node) {
        var url=node.attributes.authPath;
        var html='<iframe src="'+url+'" frameborder="no" height="520px" width="100%"></iframe>';
        var exists=$("#tab").tabs("exists",node.text);
        if (exists){
            $("#tab").tabs("select",node.text);
        } else{
            $("#tab").tabs("add",{
                title:node.text,
                closable:true,
                content:html,
                iconCls:node.iconCls
            })
        }
    }
</script>
</body>
</html>